<template>
    <div class="home">
        <div class="top">
            <div class="avatar">
                <img src="../../assets/vue.svg" alt="">
            </div>
            <div class="message">
                <div class="time">
                    {{ timeText }}
                </div>
                <div class="text">
                    后台管理系统
                </div>
            </div>
        </div>
        <div class="chartList">
            <div ref="chartRef1" class="chart-bar"></div>
            <div ref="chartRef2" class="chart-pie"></div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts';
// 初始化echarts
const chartRef1 = ref(null);
let myChart1 = null;
const chartRef2 = ref(null);
let myChart2 = null;
// 根据时间段显示不同文本
const timeText = ref("")

onMounted(() => {
    // 初始化表格
    myChart1 = echarts.init(chartRef1.value);
    myChart2 = echarts.init(chartRef2.value);
    // 表格配置
    const option1 = {
        title: {
            text: '近几周访问量 / 人'
        },
        tooltip: {},
        legend: {
            data: ['访问量'],
            right: "5%",
            bottom: "bottom",
        },
        xAxis: {
            data: ["第一周", "第二周", "第三周", "第四周", "第五周", "第六周"]
        },
        yAxis: {},
        series: [{
            name: '访问量',
            type: 'bar',
            data: [1200, 800, 1000, 1600, 500, 900]
        }]
    };
    const option2 = {
        legend: {
            orient: "vertical",
            left: "left",
            data: ["儿童", "青少年", "中年人", "老年人"]
        },
        tooltip: {},
        series: [{
            type: "pie",
            data: [{
                value: 160,
                name: "儿童"
            }, {
                value: 310,
                name: "青少年"
            }, {
                value: 234,
                name: "中年人"
            }, {
                value: 135,
                name: "老年人"
            }]
        }]
    }
    // 应用配置
    myChart1.setOption(option1);
    myChart2.setOption(option2);

    // 判断当前所属时间段
    const hour = new Date().getHours(); // 获取当前小时
    if (hour < 12) {
        timeText.value = "上午好啊,管理员1134"
    } else if (hour < 18) {
        timeText.value = "下午好,管理员1134"
    } else {
        timeText.value = "晚上好,管理员1134"
    }
})
</script>

<style lang="scss" scoped>
.home {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .top {
        height: 30%;
        border: 1px solid rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.3);
        padding: 20px;
        display: flex;
        align-items: center;

        .avatar {
            width: 100px;
            height: 100px;
            margin-right: 20px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .message {
            height: 70%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            .time {
                font-size: 24px;
                font-weight: bold;
            }

            .text {
                font-size: 16px;
                color: #3bdada;
            }
        }
    }

    .chartList {
        height: 65%;
        display: flex;
        justify-content: space-between;

        .chart-bar {
            width: 60%;
            height: 400px;
            border: 1px solid #000;
            padding: 20px;
        }

        .chart-pie {
            width: 38%;
            height: 400px;
            border: 1px solid #000;
            padding: 20px;
        }
    }
}
</style>